<template>
    <div class="adddata">
        <!-- 秒杀商品列表接口 -->
        <div class="title">
            <el-icon>
                <Tickets />
            </el-icon>
            <h3>数据列表</h3>
        </div>
        <div>
            <el-button @click="createFlashProductRelationFn">添加</el-button>
        </div>
    </div>
    <div class="tables">
        <!-- 数据的展示 -->
        <el-table align="center" :data="tableData" style="width: 100%;" border>
            <el-table-column align="center" prop="id" label="编号" width="99" />
            <el-table-column align="center" prop="product.name" label="商品名称" width="686" />
            <el-table-column align="center" label="货号" width="140">
                <template #default="scope">
                    <div>
                        NO.
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="商品价格" width="99">
                <template #default="scope">
                    <div>
                        ￥{{ scope.row.product.price }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="剩余数量" width="99">
                <template #default="scope">
                    <div>
                        {{ scope.row.product.stock }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="秒杀价格" width="99">
                <template #default="scope">
                    <div>
                        {{ scope.row.flashPromotionPrice ? `￥${scope.row.flashPromotionPrice}` : '' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" props="flashPromotionCount" label="秒杀数量" width="99">
                <template #default="scope">
                    <div>
                        {{ scope.row.flashPromotionCount }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" props="flashPromotionLimit" label="限购数量" width="99">
                <template #default="scope">
                    <div>
                        {{ scope.row.flashPromotionLimit }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" props="sort" label="排序" width="99">
                <template #default="scope">
                    <div>
                        {{ scope.row.sort }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="99" flex="right">
                <template #default="scope">
                    <span class="bianji">编辑</span>
                    <span @click="deleteFlashProductRelationFn(scope.row.id)">删除</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <!-- 分页器 -->
            <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
                :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
    <flashProductRelation :visible="visible" @cancel="onCancelDidlog"></flashProductRelation>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { Ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElTable } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
// 导入接口
import * as api from '../../request/api'
// 导入接口类型
import { flashProductRelationListParams, flashProductRelationListRes } from '../../request/SmsAdminConreiller'
// 导入秒杀商品列表弹出框
import flashProductRelation from './components/flashProductRelationEdit.vue'
import router from '../../router'
// 封装数据处理函数
import useTable from '../../hooks/useTables'
// 获取路由参数
let route: any = useRoute().query

// 弹出框状态
let visible = ref(false)

// 添加
let createFlashProductRelationFn = () => {
    // console.log('添加了');
    visible.value = true
}
// 子组件出过来的事件
let onCancelDidlog = () => {
    visible.value = false
}

//数据请求展示
let { tableData, getTableData, pagination } = useTable(api.flash.getflashProductRelationList, {
    // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
    flashPromotionId: route.flashPromotionId,
    flashPromotionSessionId: route.flashPromotionSessionId
})
getTableData()
console.log(tableData);

// 删除商品关联
let deleteFlashProductRelationFn = async (id: number) => {
    ElMessageBox.confirm(
        '是否要删除该商品?', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await api.flash.deleteFlashProductRelation(id)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}

//分页
const handleSizeChange = (val: number) => {
    getTableData()
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    getTableData()
    console.log(`current page: ${val}`)
}

</script>

<style scoped lang="scss">
.adddata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ebeef5;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    margin-top: 60px;
    margin-bottom: 20px;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ei {
        display: flex;
        align-items: center;

        h3 {
            color: #303133;
            font-size: 14px;
            margin-left: 10px;
        }
    }

    h3 {
        color: #303133;
        font-size: 14px;
        margin-left: 10px;
    }
}

.tables {
    .pagination {
        margin: 20px 0;
        padding-right: 20px;
        float: right;
    }

    span {
        color: #409eff;
        cursor: pointer;
    }

    .bianji {
        margin: 0 5px;
    }

    .users {
        color: #409eff;
        font-size: 12px;

        &:hover {
            color: rgba(64, 158, 255, 0.7);
            cursor: pointer;
        }
    }
}
</style>